<template>
	<view class="star-list">
		<view class="icon-star" v-for="(item) in totalStar" :key="index" :class="{'actived':item<starNum}"></view>
		
	</view>
</template>

<script>
	import { fetchData } from '../../utils/request';
	import  {mapState} from 'vuex'
	export default {
		name:"classCompare",
		data() {
			return {
				starNum:0,
				totalStar:5
				// 0<grading<40 : 1颗星,
				// 40<=grading<60 : 2颗星,
				// 60<=grading<80 : 3颗星,
				// 80<=grading<100 : 4颗星,
				// grading>=100 : 5颗星,
			};
		},
		computed:{
			...mapState(['classId','baseImgURL'])
		},
		methods:{
			async getClassList() {
			     let result = await fetchData({
			       url: '/database/classInfo/api/selectComClassInfoByClassId?classId='+this.classId,
			       method: 'post'
			     })
			     if (result.code == 200) {
				   const score = result.data.grading;
				   if(score>0 && score<40) {
					   this.starNum = 1;
				   }
				   if(score>=40 && score<60) {
				   	  this.starNum = 2;
				   }
				   if(score>=60 && score<80) {
				   	  this.starNum = 3;
				   }
				   if(score>=80 && score<100) {
				   	  this.starNum = 4;
				   }
				   if(score>=100){
					   this.starNum = 5;
				   }
			     }
			   },
		},
		mounted(){
			this.getClassList();
		}
	}
</script>

<style lang="scss">
	.star-list {
		position: absolute;
		display: flex;
		left: 117.06upx;
		top: 15.63upx;
	}
.icon-star {
	width: 17.58upx;
	height: 17.58upx;
	background: url($imageurl+'/icon_star.png') left center no-repeat;
	background-size:100%;
	margin-right: 4upx;
	&.actived {
		background: url($imageurl+'/icon_star_h.png') left center no-repeat;
		background-size:100%;
	}
}
</style>